<template>
	<div class="container">

    <div class="title">
      <label class="g-font-f2">{{options.title}}</label>
      <span class="g-font-f5">更新于{{data.time | dataTimeFormat12}}</span>
    </div>
    <div class="block" style="position: relative;">
      <list-shade v-if="!(data.up && data.up.length != 0 || data.down && data.down.length != 0)"></list-shade>
      <ul class="positive">
        <li class="description">
          <span class="g-font-f4">{{options.positiveText}}</span>
        </li>
        <li v-show = "index < threshold" v-for = "(item, index) in data.up">
          <span class="left">{{item.name ? item.name : item.moduleName}}</span>
          <span class="right" v-if="item.bturnover !== undefined">
            {{item.bturnover | numOfLg }}<span class="small">({{item.bturnover | textOfLg }})</span>
          </span>
          <span class="right" v-else>{{item.nNum}}<span class="small">/{{item.nSum}}(只)</span></span>
        </li>
      </ul>
      <ul class = "negative">
        <li class="description">
          <span class="g-font-f4">{{options.negativeText}}</span>
        </li>
        <li v-show = "index < threshold" v-for = "(item, index) in data.down">
          <span class="left">{{item.name ? item.name : item.moduleName}}</span>
          <span class="right green" v-if="item.sturnover !== undefined">
						{{item.sturnover | numOfLg }}<span class="small">({{item.sturnover | textOfLg }})</span>
					</span>
          <span class="right green" v-else>{{item.nNum}}<span class="small">/{{item.nSum}}(只)</span></span>
        </li>
      </ul>
      <!--查看更多-->
      <p class='load-more' @click = "loadMore"
				v-if = '(data.up && data.up.length > 4) || (data.down && data.down.length > 4)'>
        <a :class="{'expanded': expanded}">{{expanded?'收起':'展开查看更多'}}</a>
      </p>
    </div>
	</div>
</template>

<script type="text/javascript">

import { dataTimeFormat12 } from '@/filters/dataTime'
import { numOfLg, textOfLg } from '@/filters/legendFormat'
import listShade from '@/pages/common/ListShade'

const min = 4;
const max = 10;

export default{
  name: 'stock-distri',
  components: {
    listShade
  },
  props: {
    options: {
      type: Object,
      default: function () {
        return {
          title: '分布',
          positiveText: '净流入资金量',
          negativeText: '净流出资金量'
        }
      }
    },
    data: {
      type: Object
    }
  },
  data () {
    return {
      threshold: min,
      expanded: false
    }
  },
  filters: {
    dataTimeFormat12,
    numOfLg,
    textOfLg
  },
  methods: {
    loadMore () {
      this.expanded = this.threshold == min;
      this.threshold = this.expanded ? max : min;
    }
  }
}
</script>

<style scoped lang="less">
  @import '../../assets/css/variables.less';
  .container {
    overflow: hidden;
    text-align: left;
    .title {
      height: 0.46rem;
      line-height: 0.46rem;
      margin: 0 0.15rem;
    }
    .splitter {
      height: 1px;
      background-color: #dddddd;
    }
    .more {
      text-align: center;
    }
  }
  .decription {
    line-height: 0.3rem;
    width: 100%;
    color: #999999;

    span {
      width: 47%;
      background-color: #F6F6F6;
      display: inline-block;
      &.right {
        float:right;
      }
    }
  }
  .block {
    min-height: .8rem;
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      width: 47%;
      top:0;
      .description {
        background-color: #F6F6F6;
        line-height: 0.3rem;
        width: 100%;
        display: inline-block;
      }
      &.positive{
        float: left;
      }
      &.negative {
        float: right;
      }

      li {
        width: 1.575rem;
        height: 0.3rem;
        margin-top: 0.075rem;
        padding-left: 0.13rem;
        font: .14rem/.3rem PingFang-SC;
        color: #222222;

        .left {
          float:left;
        }
        .right {
          color: #EB333B;

          float:right;
          margin-right: 0.15rem;

          &.green {
            color: #1AAE52;
          }
          .small {
            font-size: .12rem;
          }
        }
      }
    }
  }

  .load-more{
    clear: both;
    margin: 0.08rem 0 0;
  }
</style>
